<template>
  <div id="create-topic">
    <div class="top-back-wrapper">
      <v-top-back siteName="Vue-CN-Node社区 创建话题" ref="topBack"></v-top-back>
    </div>
    <div class="scroll-wrapper" v-if="isLogin">
      <v-scroll ref="scroll" :bounce="false">
        <div class="topic-center">
          <div class="topic-info">
            <v-input ref="inputs" :title="title_title" :label="title_label" v-model="title_value"></v-input>
            <v-radio :title="tab_title" :tabs="tab_group" :current="current_tab" @checkTab="checkTab"></v-radio>
          </div>
          <div class="topic-content-button">
            <div class="topic-content">
              <span class="title">话题内容</span>
              <textarea v-model="content" class="content" placeholder="请输入话题内容"></textarea>
            </div>
            <button type="button" class="send" @click="send($event)">确认发布</button>
          </div>
        </div>
      </v-scroll>
    </div>
    <v-no-login v-if="!isLogin"></v-no-login>
  </div>
</template>

<script type="text/ecmascript-6">
  import NoLogin from 'components/no-login/no-login'
  import TopBack from 'components/top-back/top-back'
  import Scroll from 'base/scroll/scroll'
  import Input from 'base/input/input'
  import Radio from 'base/radio/radio'
  import {Alert, checkLogin, isLogin} from 'common/js/mixin'
  import {createTopic} from 'api/topic'

  export default {
    mixins: [Alert, isLogin, checkLogin],
    data() {
      return {
        title_title: '话题标题',
        title_label: '请输入您的标题',
        title_value: '',
        tab_title: '话题标签',
        tab_group: [
          {
            'title': '分享',
            'value': 'share'
          },
          {
            'title': '问答',
            'value': 'ask'
          },
          {
            'title': '招聘',
            'value': 'job'
          },
          {
            'title': '客户端',
            'value': 'dev'
          }
        ],
        current_tab: 'share',
        content: '',
        data: []
      }
    },
    methods: {
      send(event) {
        if (!event._constructed) {
          return false
        }
        this._checkLogin().then((res) => {
          if (res === false) {
            return
          }
          if (!this.title_value) {
            this.showAlert({
              style: 'warning',
              content: '请输入话题标题！'
            })
            return false
          } else if (!this.current_tab) {
            this.showAlert({
              style: 'warning',
              content: '请选择正确的话题标签！'
            })
            return false
          } else if (!this.content) {
            this.showAlert({
              style: 'warning',
              content: '请输入话题内容！'
            })
            return false
          }
          createTopic(this.userInfo.user_token, this.title_value, this.current_tab, this.content).then((res) => {
            if (res.success === true) {
              this.showAlert({
                content: '话题发布成功！'
              })
              this.$router.goBack()
            } else {
              this.showAlert({
                style: 'warning',
                content: res.error_msg
              })
            }
          })
        })
      },
      checkTab(val) {
        this.current_tab = val
      }
    },
    components: {
      'v-top-back': TopBack,
      'v-scroll': Scroll,
      'v-input': Input,
      'v-radio': Radio,
      'v-no-login': NoLogin
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #create-topic {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    .scroll-wrapper {
      position: absolute;
      width: 100%;
      top: 45px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      background-color: #ffffff;
      .topic-center {
        padding: 15px 15px 15px 15px;
        box-sizing: border-box;
        .topic-info {
          width: 100%;
          background-color: $color-text-w;
          box-shadow: 0 0 8px $color-background-d;
          box-sizing: border-box;
          padding: 10px 15px 20px 15px;
        }
        .topic-content-button {
          width: 100%;
          background-color: $color-text-w;
          box-shadow: 0 0 8px $color-background-d;
          box-sizing: border-box;
          padding: 10px 15px 20px 15px;
          margin-top: 10px;
          .topic-content {
            width: 95%;
            margin: 0 auto 0;
            .title {
              display: inline-block;
              width: 100%;
              line-height: 30px;
              font-size: $font-size-medium;
              color: #666666;
            }
            .content {
              width: 100%;
              height: 278px;
              margin: 10px 0 0 0;
              resize: none;
              font-size: $font-size-medium;
              box-sizing: border-box;
              border: 1px solid #eeeeee;
              padding: 10px;
              border-radius: 2px;
              line-height: 20px;
              &:focus {
                border: 1px solid #39f;
              }
              &::placeholder {
                font-size: $font-size-small;
                color: #aaaaaa;
              }
            }
          }
          .send {
            width: 100%;
            margin: 20px auto 0;
            display: block;
            border: none;
            border-radius: 2px;
            height: 34px;
            line-height: 34px;
            background-color: #2196f3;
            color: $color-text-w;
            font-size: $font-size-medium;
            cursor: pointer;
            box-shadow: 0 0 5px $color-background-d;
          }
        }
      }
    }
  }
</style>
